<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prometheus 管理器</title>
    <link href="/static/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Prometheus 管理器</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/collectors">采集器</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/alert_rules">告警规则</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/notifications">通知配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/alert_history">告警历史</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron">
                    <h1 class="display-4">Prometheus 管理器</h1>
                    <p class="lead">集中管理 Prometheus 采集器和告警通知</p>
                    <hr class="my-4">
                    <p>支持 node-exporter、cAdvisor 等采集器的动态管理，以及多平台告警通知</p>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="card text-white bg-primary mb-3">
                    <div class="card-header">采集器</div>
                    <div class="card-body">
                        <h5 class="card-title" id="collectors-count">0</h5>
                        <p class="card-text">已配置的采集器数量</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-success mb-3">
                    <div class="card-header">告警规则</div>
                    <div class="card-body">
                        <h5 class="card-title" id="alert-rules-count">0</h5>
                        <p class="card-text">已配置的告警规则数量</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-info mb-3">
                    <div class="card-header">通知配置</div>
                    <div class="card-body">
                        <h5 class="card-title" id="notifications-count">0</h5>
                        <p class="card-text">已配置的通知渠道数量</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-white bg-warning mb-3">
                    <div class="card-header">告警历史</div>
                    <div class="card-body">
                        <h5 class="card-title" id="alerts-count">0</h5>
                        <p class="card-text">最近告警数量</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/bootstrap.bundle.min.js"></script>
    <script>
        // 获取统计数据
        async function loadStats() {
            try {
                const [collectorsRes, alertRulesRes, notificationsRes, alertsRes] = await Promise.all([
                    fetch('/api/collectors/'),
                    fetch('/api/alert_rules/'),
                    fetch('/api/notification_configs/'),
                    fetch('/api/alert_history/')
                ]);
                
                const collectors = await collectorsRes.json();
                const alertRules = await alertRulesRes.json();
                const notifications = await notificationsRes.json();
                const alerts = await alertsRes.json();
                
                document.getElementById('collectors-count').textContent = collectors.length;
                document.getElementById('alert-rules-count').textContent = alertRules.length;
                document.getElementById('notifications-count').textContent = notifications.length;
                document.getElementById('alerts-count').textContent = alerts.length;
            } catch (error) {
                console.error('获取统计数据失败:', error);
            }
        }
        
        document.addEventListener('DOMContentLoaded', loadStats);
    </script>
</body>
</html>